<template>
    <div>
        <div ref="sceneDataPieChart" class="pieChat"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {importScenePieData} from '../../../homePage/components/listPage/dataAccess/api/echartsChatApi'
export default {
    data() {
        return {
            allData: []
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const res = await importScenePieData()
            this.allData = res.data.data;
            this.initChart();
        },
        initChart() {
            var allData = []
            this.allData.forEach(item => {
                allData.push({
                    value: item.total_size,
                    name: item.main_scene
                })
            });
            
            const option = {
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '70%'],
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false
                        },
                        data: allData,
                        itemStyle: {
                          normal: {
                            color: function (colors) {
                               var colorList = [
                                  '#0E4CFF',
                                  '#07AB68',
                                  '#FFC617',
                                  '#ef6567'
                                ];
                                return colorList[colors.dataIndex];
                                }
                              }
                        }
                    }
                    
                ]
            }
            var myChart = echarts.init(this.$refs.sceneDataPieChart);
            myChart.setOption(option);
            //  echart图表自适应
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    }
}
</script>
<style scoped>
.pieChat{
    width:180px;
    height:180px;
    margin-left: -20px;
    margin-top: -30px;
}
</style>